import './topHeader.css'
import React from 'react'
import { DownOutlined, SmileOutlined } from '@ant-design/icons'
import { Dropdown, Space } from 'antd'
import usericon from '../../assets/usericon.png'
import { useNavigate } from 'react-router-dom'
import { logOut } from '../../api/api'

function TopHeader() {
  const logout = () => {
    localStorage.clear()
    logOut().then((res) => {
      console.log('退出登录', res)
      navigate('/login')
    })
  }
  const items = [
    {
      key: 1,
      label: (
        <a target="_blank" rel="noopener noreferrer" onClick={logout}>
          退出登录
        </a>
      ),
    },
  ]
  const navigate = useNavigate()

  return (
    <div className="justify-between topbox ">
      <div></div>
      <Dropdown
        menu={{
          items,
        }}>
        <a onClick={(e) => e.preventDefault()}>
          <Space>
            <div className="align-center">
              <img src={usericon} className="usericon" />
            </div>
            {localStorage.getItem('nickname') || ''}
            <DownOutlined />
          </Space>
        </a>
      </Dropdown>
    </div>
  )
}
export default TopHeader
